<template>
  <el-card class="operate-container">
    <div class="card-title">
      <h3>{{ equipmentData.equipmentSelect === 'operateSystem' ? '操作设备' : '访问浏览器' }}</h3>
      <el-button type="primary" size="mini" @click="toggleEquipment">切换为{{ equipmentData.equipmentBtnText }}</el-button>
    </div>
    <div class="operate-card-content">
      <el-row :gutter="40">
        <el-col :span="10">
          <div class="operate-card-progressbar">
            <div v-if="equipmentData.equipmentSelect === 'operateSystem'" class="operate-card-progressbar-item" v-for="item in dataList" :key="item.name">
              <div class="operate-card-progressbar-item-title">
                <h3>{{ item.name }}:{{ item.percentage }}%</h3>
                <span>{{ item.value }}次</span>
              </div>
              <el-progress :percentage="item.percentage" :color="item.itemStyle.normal.color"></el-progress>
            </div>
            <div v-else class="operate-card-progressbar-item" v-for="item in browser_data_list" :key="item.name">
              <div class="operate-card-progressbar-item-title">
                <h3>{{ item.name }}:{{ item.percentage }}%</h3>
                <span>{{ item.value }}次</span>
              </div>
              <el-progress :percentage="item.percentage" :color="item.itemStyle.normal.color"></el-progress>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <div id="access-areas" ref="accessAreasRef" style="width:100%;height:100%"></div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script setup>
import { onMounted, getCurrentInstance, reactive } from 'vue'
const { proxy } = getCurrentInstance()

// 操作设备数据
const dataList = reactive([
  {name: 'Windows', value: 0,itemStyle:{normal:{color:'#0766FE'}}},
  {name: 'Android', value: 0,itemStyle:{normal:{color:'#00C18B'}}},
  {name: 'iOS', value: 0,itemStyle:{normal:{color:'#FFA93C'}}},
  {name: 'macOS', value: 0,itemStyle:{normal:{color:'#FF576E'}}},
  {name: 'Linux', value: 0,itemStyle:{normal:{color:'#FF576E99'}}},
  {name: '其他', value: 0,itemStyle:{normal:{color:'#0766FE99'}}}
])

const browser_data_list = reactive([
  {name:'谷歌浏览器',cname:'Chrome',value:0,itemStyle:{normal:{color:'#0766FE'}}},
  {name: '微信内嵌浏览器',cname:'Wechat', value: 0,itemStyle:{normal:{color:'#00C18B'}}},
  {name: 'Safari浏览器',cname:'Safari', value: 0,itemStyle:{normal:{color:'#FFA93C'}}},
  {name: 'QQ浏览器',cname:'QQ',value: 0,itemStyle:{normal:{color:'#FF576E'}}},
  {name: '搜狗浏览器',cname:'Sougou',value: 0,itemStyle:{normal:{color:'#FF576E99'}}},
  {name: '其他', cname: "Other",value: 0,itemStyle:{normal:{color:'#0766FE99'}}}
])

const option = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}:{c}人 ({d}%)'
  },
  series: [
    {
      center: ['50%', '40%'],
      name: '访问来源',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: dataList
    }
  ],
  legend: {
    bottom: '8px',
    left: '0',
    right: '0',
  }
}

// 计算百分比方法
const getPercent = (num, total) => {
  num = parseFloat(num)
  total = parseFloat(total)
  if (isNaN(num) || isNaN(total)) {
    return '-'
  }
  return total <= 0 ? 0 : Math.round(num / total * 10000) / 100.00
}
// 给每一项数据添加百分比
dataList.forEach(item=>{
  item.percentage = getPercent(item.value,dataList.reduce((total,item)=>{
    return total + item.value
  },0))
})
let accessEquipmentCharts = null
onMounted(() => {
  // 操作设备
  accessEquipmentCharts = proxy.$echarts.init(proxy.$refs.accessAreasRef,'light')
})

const chartResize = ()=>{
  accessEquipmentCharts.resize()
}

let equipmentData = reactive({
  // 操作设备切换。operateSystem为操作系统,visitBrowser为访问浏览器
  equipmentSelect: 'operateSystem',
  equipmentBtnText: '访问浏览器'
})
// 切换操作设备按钮方法
const toggleEquipment = ()=>{
  if(equipmentData.equipmentSelect === 'operateSystem'){
    equipmentData.equipmentSelect = 'visitBrowser'
    equipmentData.equipmentBtnText = '操作系统'
    chartOption(platform_data,browser_data,2)
  }else if(equipmentData.equipmentSelect === 'visitBrowser'){
    equipmentData.equipmentSelect = 'operateSystem'
    equipmentData.equipmentBtnText = '访问浏览器'
    chartOption(platform_data,browser_data,1)
  }
}

let platform_data = null;
let browser_data = null
const chartOption = (platform,browser,type) => {
  let result;
  if(!type) platform_data = platform;browser_data = browser;
  if(!type || type === 1){
    Object.keys(platform).forEach(item=>{
      let index = dataList.findIndex(i=>i.name === item)
      if(index>=0){
        dataList[index].value = platform[item].count
      }
    })
    dataList.forEach(item=>{
      item.percentage = getPercent(item.value,dataList.reduce((total,item)=>{
        return total + item.value
      },0))
    })
    result = dataList
  }else{
    Object.keys(browser).forEach(item=>{
      let index = browser_data_list.findIndex(i=>i.cname == item)
      if(index>=0){
        browser_data_list[index].value = browser[item].count
      }
    })
    browser_data_list.forEach(item=>{
      item.percentage = getPercent(item.value,browser_data_list.reduce((total,item)=>{
        return total + item.value
      },0))
    })
    result = browser_data_list
  }

  option.series[0].data = result
  accessEquipmentCharts.clear()
  accessEquipmentCharts.setOption(option)
}

defineExpose({
  chartResize,
  chartOption
})
</script>

<style lang="less" scoped>
.operate-container{
  margin-bottom: 0!important;
  &:deep(.el-card__body){
    padding: 20px;
    box-sizing: border-box;
    .operate-card-content {
      margin-top: 40px;
      .operate-card-progressbar {
        display: flex;
        flex-direction: column;
        .operate-card-progressbar-item{
          flex: 1;
          &:not(:nth-last-of-type(1)){
            margin-bottom: 30px;
          }
          &:nth-last-of-type(1){
            margin-bottom: 15px;
          }
          .operate-card-progressbar-item-title{
            display: flex;
            justify-content: space-between;
            h3,span{
              font-size: 14px!important;
              font-weight: 600!important;
              color: #666666!important;
            }
          }
          .el-progress {
            &:deep(.el-progress__text){
              display: none;
            }
          }
        }
      }
    }
  }
}
</style>
